<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分享资源-编程导航</title>
    <link type="favicon" rel="shortcut icon" th:href="@{/img/pns.png}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/addres.css}">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <!-- 引入Jquery  -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <!-- 引入Layui.css -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/js/vue.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <!-- 引入Layui.js -->
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/commen.js}"></script>
    <script th:src="@{/js/addRes.js}"></script>
</head>
<body>
<div class="toolbar">
    <div class="layui-container">
        <div class="layui-row">
            <div class="toolbar-container-left layui-col-md4">
                <div class="toolbar-logo">
                    <img th:src="@{/img/logo.png}" title="网站首页">
                </div>
                <div class="toolbar-menus">
                    <ul>
                        <li><a th:href="@{/}" title="网站首页">首页</a></li>
                        <li><a th:href="@{/resources}" title="编程资源">资源</a></li>
<!--                        <li><a href="index.html" title="世界">世界</a></li>-->
                        <li><a th:href="@{/rank}" title="全站热门内容">排行</a></li>
                    </ul>
                </div>
            </div>
            <div class="toolbar-container-middle layui-col-md4">
                <form action="/search" method="POST" class="layui-form">
                    <input id="Search" type="text" name="key" required lay-verify="required" placeholder="请输入关键字搜索"
                           autocomplete="off" list="searchList" class="layui-input search-input">
                    <button type="button" class="layui-btn search">搜索</button>
                </form>
            </div>
            <div class="toolbar-container-right layui-col-md4">
                <ul class="layui-nav">
                    <li class="layui-nav-item create">
                        <a href=""><i class="el-icon-circle-plus"></i>&nbsp;创作</a>
                        <dl class="layui-nav-child">
                            <dd><a th:href="@{/article/write}"><i class="layui-icon layui-icon-edit"></i>&nbsp;写文章</a></dd>
                            <dd><a th:href="@{/resource/add}"><i class="el-icon-upload"></i>&nbsp;上传资源</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item message">
                        <a href=""><i class="layui-icon layui-icon-notice"></i>消息
<!--                            <span class="layui-badge">9</span>-->
                        </a>
                    </li>
                    <li class="layui-nav-item account">
                        <a href=""><img
                                src=""
                                class="layui-nav-img">我</a>
                        <dl class="layui-nav-child">
                            <dd><a th:href="@{/user/account/account}" target="_blank"><i class="fa fa-universal-access"
                                                                                         aria-hidden="true"></i>&nbsp;账号管理</a></dd>
                            <dd><a th:href="@{/user/account/article}" target="_blank"><i class="fa fa-arrows-alt"></i>&nbsp;我的博客</a>
                            </dd>
                            <dd><a th:href="@{/user/account/res/}" target="_blank"><i class="fa fa-database"></i>&nbsp;我的分享</a></dd>
                            <dd><a th:href="@{/user/logout}"><i class="fa fa-sign-out"
                                                                aria-hidden="true"></i>&nbsp;退出</a></dd>
                        </dl>
                    </li>
                    <li class="LoginAndRegister">
                        <a th:href="@{/user/login}">登录</a>&nbsp;/&nbsp;<a th:href="@{/user/register}">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="home layui-col-md12">
    <div class="layui-container">
        <div class="article-content layui-col-md9 layui-form">
            <ul>
                <li>
                    <label class="layui-form-label"><span>名&emsp;&emsp;称:</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="resName" required lay-verify="required" placeholder="请输入资源名称" autocomplete="off" class="layui-input">
                    </div>
                </li>
                <li>
                    <label class="layui-form-label"><span>简&emsp;&emsp;介:</span></label>
                    <div class="layui-input-block">
                        <textarea name="resIntro" required lay-verify="required" placeholder="请输入资源简介" class="layui-textarea"></textarea>
                    </div>
                </li>
                <li>
                    <label class="layui-form-label"><span>图&emsp;&emsp;标:</span></label>
                    <div class="layui-input-block lauyi-form-item">
                        <div class="layui-upload layui-input-block">
                            <img src="" id="resLogo" style="width: 90px">
                            <button type="button" class="layui-btn layui-btn-primary" id="logoBtn"><i class="layui-icon">&#xe67c;</i>选择图片</button>
                            <!-- <button type="button" class="layui-btn" id="uploadBtn">开始上传</button> -->
                        </div>
                        <script>
                            layui.use('upload', function() {
                                var upload = layui.upload;

                                //执行实例
                                var uploadInst = upload.render({
                                    elem: '#logoBtn', //绑定元素
                                    url: '/upload/', //上传接口
                                    accept: "images",
                                    done: function(res) {
                                        //上传完毕回调
                                        $("#resLogo").attr('src', res.data);
                                    },
                                    error: function() {
                                        //请求异常回调
                                    }
                                });
                            });
                        </script>
                    </div>
                </li>
                <li>
                    <label class="layui-form-label"><span>类&emsp;&emsp;型:</span></label>
                    <div class="layui-input-block lauyi-form-item">
                        <input type="radio" name="type" value="link" title="链接" lay-filter="type">
                        <input type="radio" name="type" value="file" title="文件" checked lay-filter="type">
                    </div>
                </li>
                <li class="resLink">
                    <label class="layui-form-label"><span>链&emsp;&emsp;接:</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="link" required lay-verify="required" placeholder="请输入资源链接" autocomplete="off" class="layui-input">
                    </div>
                </li>
                <li class="resFile">
                    <label class="layui-form-label"><span>上传文件:</span></label>
                    <div class="layui-input-block lauyi-form-item">
                        <div class="layui-upload layui-input-block">
                            <a href="" id="fileLink"> <span id="fileName"></span></a>
                            <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon">&#xe67c;</i>选择文件</button>
                            <!-- <button type="button" class="layui-btn" id="uploadBtn">开始上传</button> -->
                        </div>
                        <script>
                            layui.use('upload', function() {
                                var upload = layui.upload;
                                //执行实例
                                var uploadInst = upload.render({
                                    elem: '#fileBtn', //绑定元素
                                    url: '/uploadfile/', //上传接口
                                    accept: "file",
                                    done: function(res) {
                                        //上传完毕回调
                                        $("#fileName").html(res.data.filename);
                                        $("#fileLink").attr('href',res.data.url);
                                    },
                                    error: function() {
                                        //请求异常回调
                                    }
                                });
                            });
                        </script>
                    </div>
                </li>
                <li>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span>标&emsp;&emsp;签:</span></label>
                        <div class="layui-input-block">
                            <select name="tag" lay-verify="required">
                                <option value="">请选择资源类型</option>
                                <option value="书籍">书籍</option>
                                <option value="教程">教程</option>
                                <option value="工具">工具</option>
                                <option value="cpp">C/C++</option>
                                <option value="Java">Java</option>
                                <option value="Python">Python</option>
                                <option value="JavaScript">JavaScript</option>
                                <option value="GO">GO</option>
                                <option value="PHP">PHP</option>
                                <option value="AI">人工智能</option>
                                <option value="大数据">大数据</option>
                                <option value="鸿蒙">鸿蒙</option>
                                <option value="云计算">云计算</option>
                                <option value="数据结构">数据结构</option>
                                <option value="计算机组成原理">计算机组成原理</option>
                                <option value="操作系统">操作系统</option>
                                <option value="计算机网络">计算机网络</option>
                                <option value="基础教程">前端基础教程</option>
                                <option value="开发框架">前端开发框架</option>
                                <option value="常用库">前端常用库</option>
                                <option value="打包工具">前端打包工具</option>
                                <option value="云服务器">云服务器</option>
                                <option value="数据库">数据库</option>
                                <option value="开发文档">开发文档</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li style="text-align:center"><button class="layui-btn submit-res">确认发布</button></li>
            </ul>
        </div>
        <div class="home-right layui-col-md3">
            <div class="mark layui-col-md12">
                <div class="mark-title layui-col-md12">
                    <h3>积分排行</h3>
                    <a th:href="@{/rank}">更多<i class="layui-icon layui-icon-right"></i></a>
                </div>
                <div class="mark-list layui-col-md12">
                    <ul class="layui-col-md12 userRank">

                    </ul>
                </div>
            </div>

            <div class="hot-article layui-col-md12">
                <div class="hot-title layui-col-md12">
                    <h3>热门文章</h3>
                    <a th:href="@{/rank}">更多<i class="layui-icon layui-icon-right"></i></a>
                </div>
                <div class="hot-list layui-col-md12">
                    <ul class="layui-col-md12 articleRank">

                    </ul>
                </div>
            </div>
            <div class="hot-article layui-col-md12">
                <div class="hot-title layui-col-md12">
                    <h3>热门编程资源</h3>
                    <a th:href="@{/rank}">更多<i class="layui-icon layui-icon-right"></i></a>
                </div>
                <div class="hot-list layui-col-md12">
                    <ul class="layui-col-md12 ResRank">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer layui-col-md12">
    Copyright © 2022 编程导航. All Rights Reserved MIT Licensed
</div>
<div class="toTop">
    <span id="toTopTitle">返回<br>顶部</span>
    <i class="layui-icon layui-icon-top"></i>
</div>
</body>
</html>